<template>
  <div :class="[mode === 'horizontal'?'plan-card-tool-horizontal':'plan-card-tool-vertical']">
    <div :class="['plan-card',card.current]" v-for="card in planCards.length > 0 ? planCards : defaultPlanCards" :key="card.planId">
      <div v-if="mode === 'horizontal'" class="plan-card-del"></div>
      <div v-if="mode === 'horizontal'" class="el-icon-close" @click="delPlanCard(card)"></div>
      <div class="plan-card-info">
        <div class="plan-card-info-title">{{card.title}}</div>
        <div class="plan-card-info-body"
             v-for="time of card.time.split(',')"
             :key="time">{{time}}</div>
      </div>
      <svg-icon :iconClass="card.bg"/>
    </div>

    <div v-if="mode === 'horizontal'" class="plan-add" @click="addPlanCard()">
      <span class="el-icon-circle-plus"></span>
    </div>
    <div style="min-width: 1px;height: 100%;"></div>

    <el-dialog
        width="558px"
        class="bjs-dialog"
        title="新增计划卡片"
        top="3%"
        :visible.sync="addCardVisible"
        :append-to-body="true"
        :before-close="handleAddPlanClose">
      <addPlanCard ref="refAddPlanCard" @findPlanCards="findPlanCards"></addPlanCard>
    </el-dialog>
  </div>
</template>

<script>
  import {getPlans,delPlan} from "../../../api/plan"
  import addPlanCard from './addPlanCard'

  export default {
    name: "planCard",
    props: {
      /**
       * horizontal: 水平
       * vertical  : 垂直
       */
      mode: {
        type: String,
        default: 'horizontal'
      },
      /**
       * mormal: 普通
       * small : 小的
       * mini  : 最小
       */
      size: {
        type: String,
        default: 'mormal'
      }
    },
    data () {
      return {
        planCards: [],
        defaultPlanCards: [
          {
            title: "无计划",
            time: "00:00 - 23:59",
            bg: "gaming",
            planId: -1,
          }
        ],
        addCardVisible: false,
      }
    },
    methods: {
      findPlanCards () {
        this.addCardVisible = false
        getPlans({type:'CARD'}).then(resp => {
          this.planCards = resp.data
          this.currentPlanCard()
        })
      },
      addPlanCard () {
        this.addCardVisible = true
      },
      delPlanCard (card) {
        if (card.planId <= -1) return;
        this.$confirm('确定删除:  『' + card.title + '』 ？')
          .then(() => {
            delPlan({planId:card.planId}).then(() => {
              this.$bjsNotify.success('删除『' + card.title + '』成功')
              this.findPlanCards()
            })
          }).catch(() => {});
      },
      handleAddPlanClose (done) {
        this.$confirm('关闭后未保存的数据会被清空,确定关闭？')
            .then(() => {
              done()
            }).catch(() => {});
      },
      currentPlanCard () {
        this.planCards.forEach(card => {
          card.current = ''
          card.time.split(',').forEach((item) => {
            if (item) {
              let range = item.replace(/ /g,'').split('-')
              if (range) {
                let now = new Date()
                // 大于开始时间
                let beginH = Number(range[0].substring(0,2))
                let beginM = Number(range[0].substring(3,5))
                if (now.getHours() > beginH || (now.getHours() === beginH && now.getMinutes() >= beginM)) {
                  // 小于结束时间
                  let endH = Number(range[1].substring(0,2))
                  let endM = Number(range[1].substring(3,5))
                  if (now.getHours() < endH || (now.getHours() === endH && now.getMinutes() <=  endM)) {
                    card.current = 'plan-card-current'
                  }
                }
              }
            }
          })
        })
      }
    },
    mounted() {
      this.findPlanCards()
    },
    components: {
      addPlanCard
    }
  }
</script>

<style scoped lang="scss">
  .plan-card-tool-default {

  }

  .plan-card-tool-horizontal,.plan-card-tool-vertical {
    @include flex(row,flex-start,center);
    @include themeBgColor(#f8f8f8,#191910);
    height: 200px;
    margin: 0 20px;
    border-radius: 10px;
    overflow-x: scroll;

    .plan-card {
      @include flex(row,space-between,center);
      @include themeShadow(0 0 12px 0 #e2e2e2, 0 0 12px 0 #0c0c0c);
      position: relative;
      max-width: 283px;
      min-width: 283px;
      height: 150px;
      margin: 0 20px;
      border-radius: 10px;
      overflow: hidden;
      transition: box-shadow 0.3s,min-width 0.3s, height 0.3s,margin 0.3s;
      &:hover {
        @include themeShadow(0 0 12px 0 #b1b1b1, 0 0 25px 0 #000000);
        .plan-card-del,.el-icon-close {
          opacity: 1 !important;
        }
      }
      &-info {
        @include flex(column,flex-start,center);
        @include boxBase(110px,100%);
        &-title,&-body {
          @include boxBase(100%x,30px);
          @include fontBase(20px,700,Lato);
          @include themeColor(#424242,#e7e7e4);
          padding-top: 10px;
        }
        &-body {
          @include fontBase(14px,500,Lato);
          @include themeColor(#5e5e5e,#b0b0ae);
          height: 20px;
        }
      }
      &-del {
        top: 0;
        right: 0;
        position: absolute;
        border-top: 30px solid $theme-color-light;
        border-left: 30px solid transparent;
        opacity: 0;
        transition: opacity 0.3s;
        [data-theme="night"] & {
          border-top: 30px solid $theme-color-night-dark;
        }
      }
      .el-icon-close {
        @include fontBase(12px,900);
        @include themeColor(#ffffff,#000000);
        position: absolute;
        top: 4px;
        right: 3px;
        opacity: 0;
        transition: opacity 0.3s;
        cursor: pointer;
      }
    }

    .plan-card-current {
      @include themeBgColor( $theme-color-light,$theme-color-night-dark);
      .plan-card-info-title,.plan-card-info-body {
        color: #ffffff;
      }
    }

    .plan-add {
      @include flex(row,center,center);
      @include themeColor(#ad8cf2,$theme-color-night);
      @include themeShadow(0 0 12px 0 #e2e2e2,0 0 12px 0 #0b0b0b);
      height: 150px;
      min-width: 30px;
      margin:0 10px 0 0;
      border-radius: 5px;
      transition: background-color 0.3s,color 0.3s;
      cursor: pointer;
      &:hover {
        @include themeColor(#fdfdfd,#0b0b0b);
        @include themeBgColor($theme-color-light-dark-5,$theme-color-night-dark);
      }
    }
  }


  // =========================== 计划卡片 ===========================
  .plan-card-tool-vertical {
    @include flex(column,flex-start,center);
    @include boxBase(270px,100%);
    @include themeBgColor(rgba(0,0,0,0),rgba(0,0,0,0));
    min-width: 270px;
    margin:0;
    overflow-y: scroll;
    &::-webkit-scrollbar {display: none;}
    background-color: rgba(0, 0, 0, 0);

    .plan-card {
      @include themeShadow(0 0 12px 0 #e2e2e2, 0 0 12px 0 #1a1a1a);
      max-width: 220px;
      min-width: 220px;
      min-height: 100px;
      margin: 10px 5px;
      border-radius: 8px;
      &:hover {
        @include themeShadow(0 0 12px 0 #b1b1b1, 0 0 12px 0 #000000);
        .plan-card-del,.el-icon-close {
          opacity: 1 !important;
        }
      }
      &-info {
        margin-left: 10px;
        &-title,&-body {
          @include fontBase(17px,700,Lato);
          text-align: center;
        }
        &-body {
          @include themeColor(#838383, #6d6d6d);
          padding-top: 0;
          font-size: 11px;
        }
      }
    }

    .plan-card-current {
      @include themeBgColor($theme-color-light,$theme-color-night-dark);
      .plan-card-info-title,.plan-card-info-body {
        color: #ffffff;
      }
    }
  }
</style>
